<template>
  <div style="height:100%">
    <div class="flexBetween" style="height:100%;width:100%">
      <div style="position:relative;height:80%">
        <dv-water-level-pond :config="config" style="width:20rem;height:20rem" />
        <div style="color:#fff;position:absolute;top:15%;width:100%">
          <div class="flexCenter">
            <div style="font-size: 6.5rem;font-weight: bold;color: #80f4f7;">{{this.$store.state.wagePay.recordTotal}}</div>
            <div style="font-size:1.7rem;margin-left:1rem">次</div>
          </div>
          <div style="font-size: 1.9rem;font-weight: bold;text-align:center">工资发放记录</div>
        </div>
      </div>
      <div style="position:relative;height:80%;" ref="waterDiv">
        <dv-water-level-pond :config="config2" style="width:20rem;height:20rem" />

        <div style="color:#fff;position:absolute;top:15%;width:100%">
          <div class="flexCenter">
            <div style="font-size: 6.5rem;font-weight: bold;color:#65bbf9;">{{this.$store.state.wagePay.personTotal}}</div>
            <div style="font-size:1.7rem;margin-left:1rem">人</div>
          </div>
          <div style="font-size: 1.9rem;font-weight: bold;text-align:center">工资发放总人数</div>
        </div>
      </div>
      <div style="position:relative;height:80%;">
        <dv-water-level-pond :config="config3" style="width:20rem;height:20rem" />
        <div style="color:#fff;position:absolute;top:15%;width:100%">
          <div class="flexCenter">
            <div style="font-size: 6.5rem;font-weight: bold;color: #f1cc78;">0</div>
            <div style="font-size:1.7rem;margin-left:1rem">次</div>
          </div>
          <div style="font-size: 1.9rem;font-weight: bold;text-align:center">拖欠次数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [20],
        shape: 'round',
        colors: ['#0a8c9d', '#0a8c9d'],
        waveOpacity: 0.8,
        waveHeight: 10
      },
      config2: {
        data: [30],
        shape: 'round',
        colors: ['#1368a6', '#1368a6'],
        waveOpacity: 0.8,
        waveHeight: 10
      },
      config3: {
        data: [5],
        shape: 'round',
        colors: ['#8b742f', '#8b742f'],
        waveOpacity: 0.8,
        waveHeight: 10
      },
      screenWidth: '',
      personTotal: 0,
      recordTotal: 0
    }
  },
  mounted () {
    this.personTotal=this.$store.state.wagePay.personTotal
    this.recordTotal=this.$store.state.wagePay.recordTotal
  }
  // mounted() {
  //   const that = this
  //   window.onresize = () => {
  //     return (() => {
  //       window.screenWidth = document.body.clientWidth
  //       that.screenWidth = window.screenWidth*0.6*0.15
  //       // console.log(that.screenWidth*0.6*0.15);
  //     })()
  //   }
  // },
  // computed: {
  //   styleVar() {
  //     // console.log();

  //     return {
  //       width: this.screenWidth + 'px',
  //       height: this.screenWidth + 'px'

  //     }
  //   },
  // },
}
</script>

<style scoped>
::v-deep .dv-water-pond-level text {
  display: none;
}
.flexCenter {
  align-items: baseline;
}
/* .flexBetween{
  align-items: flex-end;
} */
</style>